<template>
  <div>
    <el-divider></el-divider>
    <div style="margin:10px 20px;text-align:center;">
      <el-form label-width="80px">
<!--        <el-radio-group v-model="addresseeType" @change="addresseeChange">-->
<!--          <el-radio label="chooseCustomerAddressee" border disabled>选择客户</el-radio>-->
<!--          <el-radio label="searchCustomerAddressee" border disabled>搜索客户</el-radio>-->
<!--          <el-radio label="importEmailAddressee" border disabled>导入邮箱</el-radio>-->
<!--          <el-radio label="pasteInputAddressee" border>粘贴输入</el-radio>-->
<!--        </el-radio-group>-->
        <template>
          <div v-if="this.addresseeType==='chooseCustomerAddressee'">
            <el-card  shadow="never" style="margin-top:25px;">
              <el-card  shadow="never" style="margin-top:25px;">
                <!-- <div style="width:500px;margin-left:500px;"> -->
                <div style="padding:5px 0px 20px 0px;">
                        <span>
                          <span>分类方式 ：     </span>
                          <el-radio-group v-model="importCustomerSelectionRadio" @change="handleImportCustomerSelectionRadioChange">
                            <el-radio label="byGroup">分组</el-radio>
                            <el-radio label="bySource">来源</el-radio>
                            <el-radio label="byType" disabled>类型</el-radio>
                            <el-radio label="byTag" disabled>标签</el-radio>
                          </el-radio-group>
                        </span>
                </div>
                <div>
                        <span>
                          <span>选择客户 ：     </span>
                          <el-cascader
                            :options="listOfCustomerMailbox"
                            :props="propsCustomer"
                            v-model="form.Addresser"
                            collapse-tags
                            style="width:550px;"
                            @change="changeCustomerEmailAddresserLable"
                            clearable>
                        </el-cascader>
                        </span>
                </div>
              </el-card>
            </el-card>
          </div>
          <div v-if="this.addresseeType==='searchCustomerAddressee'">
            <el-card  shadow="never" style="margin-top:25px;">
              搜索客户
            </el-card>
          </div>
          <div v-if="this.addresseeType==='importEmailAddressee'">
            <el-card  shadow="never" style="margin-top:25px;">
              导入邮箱
            </el-card>
          </div>
          <div v-if="this.addresseeType==='pasteInputAddressee'">
            <el-card  shadow="never" style="margin-top:25px;">
              <form action="">
                <el-input placeholder="请输入内容,可以多行分割输入进行批量添加" v-model="addresseeTemp" :autosize="{minRows: 2, maxRows: 10}" type="textarea" style="width:600px;" class="input-with-select">

                </el-input>
                <el-button icon="el-icon-plus" type="primary" style="margin-left: 10px" @click="batchAddAddress">添加收件人</el-button>
              </form>
            </el-card>
          </div>
        </template>
      </el-form>
    </div>
    <div style="margin:10px 20px;padding:10px 150px;border:1px solid #e6ebf5;height:72%;">
      <el-table
        :data="form.Addressee.filter(data => !searchAddressee || data.email.toLowerCase().includes(searchAddressee.toLowerCase()))"
        style="width: 100%;"
        max-height="550"
      >
        <el-table-column label="收件箱" align="center">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column
          align="center">
          <template slot="header">
            <el-input
              v-model="searchAddressee"
              size="mini"
              clearable
              placeholder="输入邮箱搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="handleEmailRemove(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/common'

export default {
  name: 'receiverList',
  props: {
    emailsTemp: '',
    addressee: []
  },
  data() {
    return {
      /// //////////////////////////收件列表//////////////////////////////////
      addresseeType: 'pasteInputAddressee',
      addresseeTemp: '',
      searchAddresser: '',
      searchAddressee: '',
      AddresseeLabel: [],
      listOfAuthorizedMailbox: [],
      listOfCustomerMailbox: [],
      listOfCustomerMailboxArray: [],
      importCustomerSelectionRadio: 'byGroup',
      propsCustomer: { multiple: true, emitPath: false, value: 'value', label: 'label' },
      getCustomerSelectionOptionsUrls: '',
      form: {
        Addressee: [],
        AddresseeEmailArray: []
      }
    }
  },
  created() {
    // const emailsTemp = [{ id: 1, name: '大胖纸', email: '123456@163.com' }, { id: 2, name: '二撒子', email: '123123@126.com' }]
    // this.form.Addressee = emailsTemp
    const emailsTemp = this.emailsTemp ?? []
    this.form.Addressee = emailsTemp
    this.form.AddresseeEmailArray = this.form.Addressee.map(m => m.email)
    this.$emit('update:addressee', this.form.Addressee)
  },
  methods: {
    /// //////////////////////////收件列表//////////////////////////////////
    batchAddAddress() {
      const addresseeTemp = this.addresseeTemp.trim()

      const addressArr = addresseeTemp.split('\n')

      const filteredArr = addressArr.filter(a =>
        // 过滤空
        a &&
        // 过滤错误的邮箱
        this.$common.checkEmailAddress(a) &&
        // 过滤重复的邮箱
        this.form.AddresseeEmailArray.indexOf(a) === -1)

      if (filteredArr.length === 0) {
        this.$message.warning('请检查输入邮箱是否正确')
        return false
      }

      postAction(filteredArr, 'Customer/BatchGetIdByEmail')
        .then((res) => {
          this.form.Addressee.push(...res.data)
          this.form.AddresseeEmailArray.push(...filteredArr)
          this.$emit('update:addressee', this.form.Addressee)
          this.addresseeTemp = ''
        })
    },
    addNewAddressee() {
      const addresseeTemp = this.addresseeTemp.trim()
      // 验证是否为空
      if (addresseeTemp.length === 0) {
        this.$message.warning('不可为空')
        return false
      }
      // 验证是否邮箱格式
      if (!this.$common.checkEmailAddress(addresseeTemp)) {
        this.$message.warning('邮箱地址不正确')
        return false
      }

      // 验证是否重复
      if (this.form.AddresseeEmailArray.indexOf(addresseeTemp) > -1) {
        this.$message.warning('邮箱地址已存在')
        return false
      }
      postAction({ email: addresseeTemp }, 'Customer/GetIdByEmail')
        .then((res) => {
          if (res.data) {
            this.form.Addressee.push(res.data)
          } else {
            this.form.Addressee.push({ email: addresseeTemp, name: '暂无', id: null })
          }
          this.form.AddresseeEmailArray.push(addresseeTemp)
          this.addresseeTemp = ''
        })
    },
    handleEmailRemove(val) {
      this.form.Addressee.splice(this.form.Addressee.findIndex(i => i === val), 1)
      this.form.AddresseeEmailArray.splice(this.form.AddresseeEmailArray.findIndex(i => i === val.email), 1)
      this.$emit('update:addressee', this.form.Addressee)
    },
    addresseeChange(val) {
      // chooseCustomerAddressee
      // searchCustomerAddressee
      // importEmailAddressee
      // pasteInputAddressee
      if (val === 'chooseCustomerAddressee') {
        this.getCustomerSelectionOptions(this.importCustomerSelectionRadio)
      }
    },
    handleImportCustomerSelectionRadioChange() {
      this.getCustomerSelectionOptions(this.importCustomerSelectionRadio)
    },
    getCustomerSelectionOptions(types) {
      getAction({}, `Customer/GetCustomerSelectionOptions?type=${types}`)
        .then((res) => {
          this.listOfCustomerMailbox = res.data.listOfCustomerMailbox
          this.listOfCustomerMailbox.forEach(m => {
            m.children?.forEach(c => { this.listOfCustomerMailboxArray[c.value] = c.email })
          })
          console.log(res)
          console.log('errresresresresor types')
        })
    },
    changeCustomerEmailAddresserLable(val) {
      console.log(val)
      this.form.AddresseeLabel = val?.map(m => this.listOfCustomerMailboxArray[m]) ?? []
    }
  }
}
</script>

<style scoped>

</style>
